<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    >
    <script>
        var SYS_BASE_URL_ENUM;
    </script>

    <link rel="stylesheet" th:href="${SYS_RES}+'/static/lay/layui/css/layui.min.css?v=1.4'">
    <link rel="stylesheet" th:href="${SYS_RES}+'/static/lay/style/admin.min.css?v=1.3'">
    <link rel="stylesheet" th:href="${SYS_RES}+'/static/lay/style/login.css'">

    <script th:src="${SYS_RES}+'/static/lay/layui/layui.min.js'"></script>
    <style>
        html {
            background-color: #fff;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background: url("/static/style/images/cas/logo_20200226_6.png") no-repeat center center;
            background-size: 100% 580px;
            height: 100%;
        }
        .bg-left {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height:580px;
            width: 498px;
            background-size: cover;
            background: url("/static/style/images/cas/logo_20200226_7.png") no-repeat center center;
        }
        .bg-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height:580px;
            width: 616px;
            right: 0;
            background-size: cover;
            background: url("/static/style/images/cas/logo_20200226_8.png") no-repeat center center;
        }
        /* 登陆框 */
        .login {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 10px;
            width: 360px;
            max-height: 440px;
            margin: auto;
            padding: 30px 50px 50px 50px;
            background-color: #fff;
            position: relative;
        }

        /* 商标 */
        .login-logo {
            width: 48px;
            height: 56px;
        }

        .login-title {
            padding-top: 10px;
            padding-bottom: 20px;
            color: #222222;
            font-size: 22px;
        }

        /* 输入框 */
        .login-input {
            box-sizing: border-box;
            display: flex;
            border: 1px solid #eee;
            border-radius: 3px;
            padding: 10px;
            margin-bottom: 20px;
            width: 100%;
        }

        .login-input > .layui-icon {
            color: #aaa;
        }

        .login-input > input {
            flex-grow: 1;
            border: none;
            margin-left: 10px;
            outline: none;
        }

        .login-btn {
            border: none;
            width: 100%;
            height: 44px;
            background-color: #ff8a8a;
            color: #fff;
            font-size: 16px;
            line-height: 36px;
        }
    </style>
</head>
<body class="page-login">
<div class="bg-left"></div>
<div class="bg-right"></div>
<form method="post" action="" class="login">
    <img src="/static/style/images/cas/logo_20200226_5.png" style="min-width:184px; max-width: 184px;margin-top: 40px;margin-bottom: 30px"
         class="logo shadow layui-col-sm5 layui-col-xs12 d-flex align-items-center justify-content-center py-5 px-4">
    <div class="login-title">临时密码登录</div>
    <div class="login-input">
        <label class="layui-icon layui-icon-username"></label>
        <input
                id="LAY-user-login-username"
                name="staffName"
                type="text" placeholder="请输入员工帐号"
        >
    </div>
    <!---->
    <div class="login-input">
        <label class="layui-icon layui-icon-password"></label>
        <input
                id="LAY-user-login-password"
                name="password"
                type="password" placeholder="请输入密码"
        >
    </div>
    <div style="display: none" id="vercode">
        <div class="login-input" style="width: 50%;float: left;">
            <label class="layui-icon layui-icon-vercode"></label>
            <input style="width: 50%;"
                   id="LAY-user-login-vercode"
                   name="vercode" maxlength="5"
                   type="text" placeholder="请输入验证码"
            >
        </div>
        <div style="float: left;margin-left: 20px">
            <img style="min-width:80px; max-width: 100px;" src="/captcha/gif.action" id="vercodeImage"/>
        </div>
    </div>

    <button
            lay-submit
            lay-filter="lay-user-login"
            class="login-btn"
    >确定
    </button>

    <input type="hidden" name="logId" id="logId" th:value="${logId}"/>
</form>

<script type="text/javascript" th:inline="javascript">
    document.domain = "xiujiadian.com";
    layui.config({
        // base: "/static/lay/",
        version: 202103051105
    }).extend({
        //index: "lib/index",
        art_cas_tmp_login: "{/}/static/js/module/cas/zmn.art.cas.tmp.login",
    }).use(['art_cas_tmp_login']);
</script>
</body>
</html>